import React from 'react';
import {
  Badge,
  Link,
  Space,
  Tooltip,
  Typography,
} from '@arco-design/web-react';
import { entityProfilesCreate } from '@/api/interface/entityProfiles';

import Deactivate from '@/assets/deactivate.svg';
import Active from '@/assets/active.svg';
import ResndLink from '@/assets/resndLink.svg';
import Edit from '@/assets/edit.svg';

export function getColumns(
  t: unknown,
  callback: (record: entityProfilesCreate, type: string) => Promise<void>,
  tableColumns: Array<unknown>,
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  options: Array<any>,
  lang: string
) {
  const defaultColumns = options.filter((a) => tableColumns.includes(a.value));

  const customColumns = [
    {
      title: t['searchTable.columns.name'],
      dataIndex: 'entity',
      render: (a: any, b: { [x: string]: any }) => {
        return <>{(a && a[lang === 'en-US' ? 'name' : 'nameAr']) || ''}</>;
      },
      width: 140,
    },
    {
      title: t['searchTable.columns.officerNameEn'],
      dataIndex: 'officerName',
      render: (a: any, _: { [x: string]: any }) => {
        return <>{a}</>;
      },
      width: 180,
    },
    {
      title: t['searchTable.columns.officerNameAr'],
      dataIndex: 'officerNameAr',
      render: (a: any, _: { [x: string]: any }) => {
        return <>{a}</>;
      },
      width: 180,
    },
    {
      title: t['searchTable.columns.admin'],
      dataIndex: 'admin',
      width: 140,
      render: (a: any) => {
        return (
          <>
            {a
              ? t['searchTable.columns.admin.admin']
              : t['searchTable.columns.admin.mormalAccount']}
          </>
        );
      },
    },
    {
      title: t['searchTable.columns.active'],
      dataIndex: 'active',
      width: 140,
      render: (a: any) => {
        return (
          <>
            {a ? (
              <Badge
                status="success"
                text={t['searchTable.operation.active']}
              />
            ) : (
              <Badge
                status="error"
                text={t['searchTable.operation.deactivate']}
              />
            )}
          </>
        );
      },
    },
    {
      title: t['searchTable.columns.action'],
      dataIndex: 'action',
      width: 140,
      fixed: 'right' as const,
      render: (_: any, b: entityProfilesCreate) => (
        <Space size={20}>
          <Tooltip
            position="bottom"
            content={t['searchTable.operation.resendTheLink']}
          >
            <ResndLink
              style={{
                width: 20,
                cursor: 'pointer',
                fill: 'var(--color-text-2)',
              }}
              onClick={() => callback(b, 'resendTheLink')}
            />
          </Tooltip>
          {b.active ? (
            <Tooltip
              position="bottom"
              content={t['searchTable.operation.deactivate']}
            >
              <Deactivate
                style={{
                  width: 20,
                  cursor: 'pointer',
                  fill: 'var(--color-text-2)',
                }}
                onClick={() => callback(b, 'editActive')}
              />
            </Tooltip>
          ) : (
            <Tooltip
              position="bottom"
              content={t['searchTable.operation.active']}
            >
              <Active
                style={{
                  width: 20,
                  cursor: 'pointer',
                  fill: 'var(--color-text-2)',
                  color: 'var(--color-text-2)',
                }}
                onClick={() => callback(b, 'editActive')}
              />
            </Tooltip>
          )}
          <Tooltip position="bottom" content={t['searchTable.operation.edit']}>
            <Edit
              style={{
                width: 20,
                cursor: 'pointer',
                fill: 'var(--color-text-2)',
              }}
              onClick={() => callback(b, 'edit')}
            />
          </Tooltip>
        </Space>
      ),
    },
  ];
  const columns = defaultColumns.map((a) => {
    const k = customColumns.findIndex((b) => b.dataIndex === a.value);
    return k === -1
      ? {
          ...{
            title: a.label,
            dataIndex: a.value,
            // onCell: onCell,
          },
          ...(a.width ? { width: a.width } : {}),
        }
      : customColumns[k];
  });
  return columns;
}
